import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';

class ImageDemoScreen extends StatelessWidget {
  const ImageDemoScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('图片与图标演示'),
        actions: const [
          Icon(Icons.search, size: 30), // Material图标
          SizedBox(width: 16),
        ],
      ),
      body: SingleChildScrollView(
        padding: const EdgeInsets.all(20),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            // 1. 网络图片
            _buildSectionTitle("网络图片（替代Glide/Picasso）"),
            Image.network(
              'https://picsum.photos/300/200', // 随机图片URL
              height: 200,
              width: double.infinity,
              fit: BoxFit.cover,
              loadingBuilder: (context, child, progress) {
                if (progress == null) return child;
                return Center(
                  child: CircularProgressIndicator(
                    value: progress.cumulativeBytesLoaded /
                        (progress.expectedTotalBytes ?? 1),
                  ),
                );
              },
              errorBuilder: (context, error, stackTrace) => Container(
                color: Colors.grey[300],
                height: 200,
                child: const Icon(Icons.error, color: Colors.red),
              ),
            ),
            const SizedBox(height: 30),

            // 2. Material图标库
            _buildSectionTitle("Material图标库"),
            const Wrap(
              spacing: 20,
              runSpacing: 20,
              children: [
                Icon(Icons.favorite, color: Colors.red, size: 40),
                Icon(Icons.star, color: Colors.amber, size: 40),
                Icon(Icons.thumb_up, color: Colors.blue, size: 40),
                Icon(Icons.lightbulb_outline, color: Colors.yellow, size: 40),
                Icon(Icons.android, color: Colors.green, size: 40),
              ],
            ),
            const SizedBox(height: 30),

            // 3. 本地资源图片
            _buildSectionTitle("本地资源图片"),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                Image.asset(
                  'assets/images/flutter_logo.png', // 需要实际添加图片到项目
                  width: 100,
                  height: 100,
                ),
                // SVG矢量图
                SvgPicture.asset(
                  'assets/images/example.svg', // 需要实际添加SVG文件
                  width: 100,
                  height: 100,
                  color: Colors.blue,
                )
              ],
            ),
            const SizedBox(height: 30),

            // 4. 圆角头像
            _buildSectionTitle("圆形头像"),
            const CircleAvatar(
              radius: 60,
              backgroundImage: NetworkImage('https://i.pravatar.cc/300'),
              child: Icon(Icons.person, size: 40),
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        child: const Icon(Icons.add_a_photo),
      ),
    );
  }
}

Widget _buildSectionTitle(String title) {
  return Padding(
      padding: const EdgeInsets.symmetric(vertical: 10),
      child: Text(title,
          style: const TextStyle(
            fontSize: 18,
            fontWeight: FontWeight.bold,
            color: Colors.blue,
          )));
}
